<template>
    <div style="height: 30px;display: flex">
        <div v-if="first" style="width: 20px"></div>
        <div v-if="!first" class="line" style="width: 20px"></div>
        <span v-if="arrowhead" class="arrowhead"></span>
        <div v-if="name" style="line-height: 30px;width: 60px;text-align: center;padding: 0px 5px">{{name}}</div>
        <div v-if="!name" class="line" style="width: 60px"></div>
        <div v-if="line" class="line" style="width: 44px"></div>
    </div>
</template>

<script>
export default {
    props: {
        name: {
            type: String,
            default: null,
        },
        line: {
            type: Boolean,
            default: false,
        },
        arrowhead: {
            type: Boolean,
            default: false,
        },
        first: {
            type: Boolean,
            default: false,
        },

    },
};
</script>

<style scoped>
.name-div{
    width: 100px;
    z-index: 100;
}
.name {
    display: inline-block;
    background-color: #fff;
    z-index: 10000;
    background-color: white;
}

.lineWidth {
}

.line {
    width: 60px;
    display: inline-block;
    height: 2px;
    background: #999999;
    margin: 0;
    margin-top: 12px;
}

.arrowhead {
    width: 8px;
    height: 5px;
    border-top: 2px solid #999;
    transform: rotate(30deg);
    margin-left: -9px;
    margin-top: 10px;
}
</style>
